import { Component, OnInit } from '@angular/core';
// 导入待办事项接口
import Todos from "./interface/todos";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 当前正在编辑的待办事项
  currentEditing: any = null;
  // url中的hash标识
  visibility: string = 'all';

  // 生命周期钩子，在初始化时会执行一次
  ngOnInit(): void {
    // 初始化时手动调用一次
    this.hashChangeHandler();
    // 当url中hash值变化时调用该函数（此处需要通过bing绑定this,不然this会指向window对象）
    window.onhashchange = this.hashChangeHandler.bind(this);
  }

  // 当 Angular 组件数据发生改变的时候，ngDoCheck 生命周期钩子就会被触发
  ngDoCheck() {
    // 使用 JSON.stringify() 方法将数据转换为 JSON字符串
    window.localStorage.setItem('todos', JSON.stringify(this.todos));
  }

  // 待办列表（并实现接口）
  // 使用 JSON.parse() 方法将数据转换为 JavaScript 对象
  todos: Todos[] = JSON.parse(window.localStorage.getItem('todos') || '[]');

  // 添加待办事项
  addTodo(e: any) {
    // 输入框内的内容
    let inputTitle = e.target.value;
    // 输入框内的内容（头尾去空格）为空
    if (!inputTitle.trim().length) {
      return;
    }
    // 输入框内的内容不为空，将其推入待办事项数组中
    this.todos.push({
      id: this.todos.length + 1,
      title: inputTitle,
      done: false
    })
    // 清空输入框内的内容
    e.target.value = '';
  }

  // 删除待办事项
  deleteTodo(index: number) {
    this.todos.splice(index, 1);
  }

  // 保存待办事项
  saveEdit(todo: any, e: any) {
    // 修改待办事项的标题
    todo.title = e.target.value;
    // 退出编辑样式
    this.currentEditing = null;
  }

  // 全选（用于判断全选是否勾选）
  get toggleAll() {
    // 只要有一个待办事项的状态为false，返回的就是false
    return this.todos.every(t => t.done);
  }

  // 全选状态改变
  toggleAllChange(e: any) {
    // 勾选全选
    if (e.target.checked === true) {
      this.todos.forEach(t => t.done = true)
    } else {
      // 取消全选
      this.todos.forEach(t => t.done = false);
    }
  }

  // 取消编辑
  cancelEdit(e: any) {
    // 利用解构赋值取得ESC的键盘码以及触发事件的target
    const { keyCode, target } = e;
    if (keyCode === 27) {
      // 将文本框的值恢复为原来的
      target.value = this.currentEditing.title;
      // 退出编辑样式
      this.currentEditing = null;
    }
  }

  // 剩余未完成的待办事项
  get remainUndoneCount() {
    return this.todos.filter(t => !t.done).length;
  }

  // 清空已完成的待办事项
  cleanCompleted() {
    this.todos = this.todos.filter(t => !t.done);
  }

  // 根据不同的hash切换不同的内容
  get filterTodos() {
    if (this.visibility === 'all') {
      return this.todos;
    } else if (this.visibility === 'active') {
      return this.todos.filter(t => !t.done);
    } else if (this.visibility === 'completed') {
      return this.todos.filter(t => t.done);
    } else {
      return;
    }
  }

  // 刷新保持路由状态
  hashChangeHandler() {
    // 获取url中的hash
    const hash = window.location.hash.substring(1);
    switch (hash) {
      case '/': this.visibility = 'all'; break;
      case '/active': this.visibility = 'active'; break;
      case '/completed': this.visibility = 'completed'; break;
      default: this.visibility = 'all'; break;
    }
  }
}
